<%@ include file="/WEB-INF/views/taglib.jsp" %>
<c:set var="systemUser" value="${systemUserForm.systemUser}"></c:set>
<c:url value="/ajax/section" var="sectionUrl"></c:url>
<c:url value="/ajax/role" var="roleUrl"></c:url>
	<h3>User Role Form</h3>
	<form:form id="form" method="post" modelAttribute="systemUserForm"  cssClass="simpleForm">
		<form:hidden path="formMode" />
		<form:hidden path="systemUser.userName" />
		
	 	<div class="clear" style="height:1px">&nbsp;</div>
		<jsp:include page="/WEB-INF/views/message.jsp"></jsp:include>
		
	  	<fieldset>
	  		<legend>User Role</legend>
	  		<div class="span-22">
	  		<aims:column cssErrorClass="error" path="systemUser.userName" cssClass="clearfix">
	  		<form:label path="systemUser.userName">
	  			User Name  
	 		</form:label>
	  		${systemUser.userName} 
			</aims:column>
			<aims:column cssErrorClass="error" path="systemUser.department.departmentId"  cssClass="clearfix">
	  		<form:label path="systemUser.department.departmentId">
	  			Department 
	 		</form:label> 
	 		<form:select id="departmentId" path="systemUser.department.departmentId" onchange="initSectionDropDown('sectionId',this.value);initRoleCheckbox('divRoleId',$('#sectionId').val())">
	 			<form:option value="">All Department</form:option>
	 			<form:options items="${globalDepartment}" itemValue="departmentId" itemLabel="departmentName" />
	 		</form:select> * please choose department <form:errors path="systemUser.department.departmentId" cssClass="errorSimple"  />   
	  		</aims:column> 
	  		<aims:column cssErrorClass="error" path="systemUser.section.sectionId"  cssClass="clearfix"> 
	  		<form:label path="systemUser.section.sectionId">
	  			Section 
	 		</form:label>
	 		<form:select path="systemUser.section.sectionId" id="sectionId" onchange="initRoleCheckbox('divRoleId',this.value)">
	 			<form:option value=""></form:option>
	 		</form:select> * please choose section <form:errors path="systemUser.section.sectionId" cssClass="errorSimple"  />   
	  		</aims:column>
	  		<p>
	  		<form:label path="systemRoles" >
	  			Roles <form:errors path="systemRoles" cssClass="errorSimple"  />
	 		</form:label> 
	 		
	 		<div id="divRoleId" class="left">
	 		
	 		</div>	
	  		</p>
	  		</div>
	 	</fieldset>
	 	<div class="action">
  			
  				<button type="submit"  class="button positive">
  				Update</button>
  				<a class="button" href="<c:url value="/user/update/${systemUser.userName}" />">Back</a>
	  	</div>
	</form:form>
	<script type="text/javascript">
	
		$(document).ready(function() {
			
			initSectionDropDown('sectionId','${systemUserForm.systemUser.department.departmentId}','${systemUserForm.systemUser.section.sectionId}');
			
			initRoleCheckbox('divRoleId','${systemUserForm.systemUser.section.sectionId}',${systemRoleIds});
			
		});

	</script>